<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="page.pageNum"
    :page-sizes="[10, 200, 300, 400]"
    :page-size="page.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="page.total"
  >
  </el-pagination>
</template>

<script>
export default {
  name: "CommonPagination",
  props: {
    page: {
      typeof: Object,
      default: () => {
        return {
          pageNum: 1,
          pageSize: 10,
          total: 100,
        };
      },
    },
  },
  methods: {
    handleSizeChange(v) {
      this.$emit('sizeChange',v)
    },
    handleCurrentChange(v) {
      this.$emit('currentChange',v)

    },
  },
};
</script>
<style lang="less" scoped>
.el-pagination {
  ::v-deep {
    .el-input__inner:hover {
      border-color: #fc740c;
    }
    .el-input__inner:focus {
      border-color: #fc740c;
    }
    .el-pager {
      .number {
        color: #333;
        border: 1px solid #e4e4e4;
        margin-right: 8px;
      }
      .number.active {
        color: #fc740c;
      }
    }
  }
}
</style>

<style lang="less" scoped>
.el-select-dropdown__item {
  color: #fc740c !important;
}
</style>
